<script setup lang="ts">
import {constantStore} from "~/stores/constantStore";
import AuthorBox from "~/components/advertisement/rewardBox.vue";
import MasterBox from "~/components/advertisement/MasterBox.vue";
import {amountRanking} from "~/api/userApi";
import {successCode} from "~/api/base/http";
import Ranking from "~/components/functional/ranking.vue";
import {getMapServerList} from "~/api/mapApi";
import {getCommodityCategoryList} from "~/api/commodityApi";
import ServerMsgInfo from "~/components/shop/serverMsgInfo.vue";

constantStore().setCurrentActivityTab("index");
useHead({
  title: constantStore().webTitle + ' -- 首页',
  meta: [
    {name: 'keywords', content: constantStore().webKeywords},
    {name: 'description', content: constantStore().webDescription}
  ],
})

onMounted(() => {
  initAmountRankingUser();
})

const projectList = ref();
let {data: mapAddressRes} = await useAsyncData('getMapServerList', () => getMapServerList());
projectList.value = constantStore().parseRes(mapAddressRes);


const userList = ref()

function initAmountRankingUser() {
  amountRanking().then((res) => {
    if (res.code === successCode) {
      userList.value = res.data
    }
  })
}
</script>

<template>
  <div class="index-box">
    <div class="main-left">
      <div class="left-item">
        <ranking :data="userList" title="余额排行榜" :url="{prefix: '/profile/',itemMsg: 'id'}"
                 :mapping="{content: 'name',tips: 'introduction',hotCount: 'money'}"/>
      </div>
      <div class="left-item">
        <master-box/>
      </div>
      <div class="left-item">
        <author-box/>
      </div>
    </div>
    <div class="main-center">
      <div class="server-content-box">
        <server-msg-info :server="projectList"/>
      </div>
    </div>
  </div>
</template>
<style scoped>
.index-box {
  display: flex;
  margin: 1rem 0;

  .main-left {
    flex: 2.5;
    height: 20rem;

    .left-item{
      margin: 1rem 0;
    }
  }

  .main-center {
    flex: 7.5;
    height: 20rem;
    margin: 0 1rem;
  }
}
</style>